<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>测试页面</title>
	<link rel="stylesheet" type="text/css" href="/vendor/layui-v2.3.0/css/layui.css">
	<link rel="stylesheet" type="text/css" href="/css/admin-layout.css">
	<script type="text/javascript" src="/vendor/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="sungui-admin-layout">
		<div class="sungui-admin-layout-side" id="admin-layout-side">
			<div class="sungui-admin-layout-side-header">
				侧边栏
			</div>
			<div class="sungui-admin-layout-side-content">
				<ul class="sungui-admin-nav-tree">
					<li class="sungui-admin-nav-item">
						<a href="javascript:void(0);" title="主页"><i class="layui-icon layui-icon-home"></i><span>首页</span></a>
					</li>
					<li class="sungui-admin-nav-item">
						<a href="javascript:void(0);" title="文章管理"><i class="layui-icon layui-icon-file-b"></i><span>文章管理</span></a>
					</li>
					<li class="sungui-admin-nav-item">
						<a href="javascript:void(0);" title="评论管理"><i class="layui-icon layui-icon-reply-fill"></i><span>评论管理</span></a>
					</li>
					<li class="sungui-admin-nav-item">
						<a href="javascript:void(0);" title="用户管理"><i class="layui-icon layui-icon-user"></i><span>用户管理</span></a>
					</li>
					<li class="sungui-admin-nav-item">
						<a href="javascript:void(0);" title="系统设置"><i class="layui-icon layui-icon-set"></i><span>系统设置</span></a>
					</li>
				</ul>
			</div>
		</div>
		<div class="sungui-admin-layout-main" id="admin-layout-main">
			<div class="sungui-admin-layout-main-header">
				<a href="javascript:void(0);" id="side-bton">
					<i class="layui-icon layui-icon-shrink-right" title="隐藏侧边栏"></i>
				</a>
			</div>
			<div class="sungui-admin-layout-main-content">
				<div style="height: 1000px; background-color: coral;">
					滚动实验
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	   $(document).ready(function(){
			// 展开或隐藏侧边栏
			function hideOrShowSide(isHide){
				if(isHide){
					//$("#admin-layout-side").toggleClass("admin-layout-side-small");
					$("#admin-layout-side").addClass("sungui-admin-layout-side-small");
					$("#admin-layout-main").addClass("sungui-admin-layout-main-big");
					$("#side-bton > i").addClass("layui-icon-spread-left");
					$("#admin-layout-side > .sungui-admin-layout-side-header").html("侧边");
					// 绑定侧边栏菜单事件
					console.log('绑定侧边栏菜单项事件');
					$(".sungui-admin-nav-tree li a").bind("click", function(){
						// 展开侧边栏
						hideOrShowSide(false);
					});
				}
				if(!isHide){
					$("#admin-layout-side").removeClass("sungui-admin-layout-side-small");
					$("#admin-layout-main").removeClass("sungui-admin-layout-main-big");
					$("#admin-layout-side > .sungui-admin-layout-side-header").html("侧边栏");
					// 取消绑定侧边栏菜单事件
					console.log('取消绑定侧边栏菜单事件');
					$(".sungui-admin-nav-tree li a").unbind("click");
					$("#side-bton > i").removeClass("layui-icon-spread-left");
				}
			}
			$("#side-bton").click(function(){
				//$("#admin-layout-side").toggleClass("admin-layout-side-small");
				if($("#admin-layout-side").hasClass("sungui-admin-layout-side-small")){
					// 处于侧边栏隐藏状态
					hideOrShowSide(false);
				} else {
					hideOrShowSide(true);
				}
				//$("#admin-layout-main").toggleClass("admin-layout-main-big");
				//$("#side-bton > i").toggleClass("layui-icon-spread-left");
			});
		});
	</script>
</body>
</html>